Shiny.addCustomMessageHandler("heatmap_values", function(message) {
    /*http://bl.ocks.org/ganezasan/dfe585847d65d0742ca7d0d1913d50e1*/

    /*const margin = { top: 50, right: 0, bottom: 100, left: 30 },
      width = 960 - margin.left - margin.right,
    */

    var dataset = message;

    var margin = { top: 50, right: 0, bottom: 100, left: 30 },
	width = window.innerWidth * 0.7,
	height = window.innerHeight * 0.66;

    
    var gridSize = Math.floor(width / 93),
	legendElementWidth = gridSize*3,
	buckets = 9;
    var colors = d3.schemeBlues[9];


    var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.style("color", "white")
	.style("padding", "8px")
	.style("background-color", "rgba(0, 0, 0, 0.75)")
	.style("border-radius", "6px")
	.style("font", "12px sans-serif")
	.text("tooltip");
    
    /*var color = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4",
      "#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9]*/
    var  months = ["J", "F", "M", "A", "M","J",
		   "J", "A", "S", "O", "N", "D"],
        days = ["1", "2", "3", "4", "5", "6", "7",
		"8", "9", "10", "11", "12", "13",
		"14", "15", "16", "17", "18", "19",
		"20", "21", "22", "23", "24", "25",
		"26", "27", "28", "29", "30", "31"];

    const smallMultiples = function(data, newDiv) {
	var heatmapTable = d3.select("#"+newDiv).append("svg")
              .attr("width", 200)//.attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)//.attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	const monthLabels = heatmapTable.selectAll(".monthLabel")
              .data(months)
              .enter().append("text")
              .text(function (d) { return d; })
              .attr("x", (d, i) => i * gridSize)//0
              .attr("y", 0) //(d, i) => i * gridSize
              .style("text-anchor", "end")
	      .style("font-size", "8px")
              .attr("transform", "translate(" + gridSize / 2 + ", -6)");//.attr("transform", "translate(-6," + gridSize / 1.5 + ")");
        /* .attr("class", (d, i) =>
	   ((i >= 0 && i <= 4) ?
	   "dayLabel mono axis axis-workweek" : "dayLabel mono axis"));*/

	const dayLabels = heatmapTable.selectAll(".dayLabel")
              .data(days)
              .enter().append("text")
              .text((d) => d)
              .attr("x", 0) //(d, i) => i * gridSize
              .attr("y", (d, i) => i * gridSize)//0
              .style("text-anchor", "middle")
	      .style("font-size", "8px")
	      .attr("transform", "translate(-6," + gridSize / 1.5 + ")"); //.attr("transform", "translate(" + gridSize / 2 + ", -6)");
        /*.attr("class", (d, i) =>
	  ((i >= 7 && i <= 16) ?
	  "timeLabel mono axis axis-worktime" : "timeLabel mono axis"));*/

	const heatmapChart = function(data) {
            const colorScale = d3.scaleQuantile()
		  .domain([0, d3.max(data, (d) => d.value)])//, buckets -1,
		  .range(colors);
	    
            const cards = heatmapTable.selectAll(".month")
		  .data(data);//(data, (d) => d.day+':'+d.hour);
	   
	    cards.enter().append("rect")
		.attr("x", (d) => (d.month - 1) * gridSize)//day
		.attr("y", (d) => (d.day - 1) * gridSize)//month
		.attr("class", "month bordered")
		.attr("width", gridSize)
		.attr("height", gridSize)
		.style("fill", colors[0])
		.style("stroke", "gray")
		.style("stroke-width", "0.5px")
		.merge(cards)
		.style("fill", (d) => colorScale(d.value))
		.on("mouseover", function(d) {
		    d3.select(this)
			.style("stroke", "orange")
			.style("stroke-width", "1px");
		    tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
		    return tooltip.style("visibility", "visible").style("opacity", 1);
		}).on("mouseout", function(d) {
		    d3.select(this)
			.style("stroke", "gray")
			.style("stroke-width", "0.5px");
		    tooltip.html("Dia: " + d.day + "<br/> "+ "Mês: " + d.month + "<br/> " + "Acidentes: " + d.value);
		    return tooltip.style("visibility", "hidden").style("opacity", 1);
		}).on("mousemove", function() {
		    d3.select(this)
			.style("stroke", "orange")
			.style("stroke-width", "1px");
		    return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
		});

            cards.exit().remove();
	    
            const legend = heatmapTable.selectAll(".legend")
		  .data([0].concat(colorScale.quantiles()), (d) => d); 
	    
            const legend_g = legend.enter().append("g")
		  .attr("class", "legend");

            legend_g.append("rect")
		.attr("x", width - 70)
		.attr("y", (d, i) => gridSize * i)//legendElementWidth
		.attr("width", legendElementWidth)
		.attr("height", gridSize)
		.style("fill", (d, i) => colors[i]);

            legend_g.append("text")
		.attr("class", "mono")
		.text((d) => "≥ " + Math.round(d))
		.attr("x", width - 40)
		.attr("y", (d, i) => gridSize * i + 10)//legendElementWidth
		.style("font-size", "8px");

            legend.exit().remove();
	    
	};
	heatmapChart(data);

    };
    smallMultiples(dataset[0], "heatmap_2012_area", 1);
    smallMultiples(dataset[1], "heatmap_2013_area", 2);
    smallMultiples(dataset[2], "heatmap_2014_area", 3);
    smallMultiples(dataset[3], "heatmap_2015_area", 4);
    smallMultiples(dataset[4], "heatmap_2016_area", 5);
    smallMultiples(dataset[5], "heatmap_2017_area", 6);
});
